<template>
    <view class="cart-item-product" :class="{ oneSpec: getAppSet().isOneSpec }" @click="goDetailPage()">
        <label class="item-radio" v-if="isShowCheckBox" @click.stop="change(isSelect)">
            <custom-checkbox :isSelect="isSelect"></custom-checkbox>
        </label>
        <image
            v-if="!getAppSet().isHideImg"
            class="item-img"
            mode="aspectFill"
            :src="easyGetImgUrl(productInfo.V_ThumbnailUrl160)"></image>
        <text class="item-name">{{ productInfo.V_Title }}</text>
    </view>
</template>

<script>
import customCheckbox from "@/components/common/custom-checkbox.vue"
export default {
    components: {
        customCheckbox,
    },
    props: {
        selectData: {
            type: Object,
            default: {},
        },
        productInfo: {
            type: Object,
            default: {},
        },
        isShowCheckBox: {
            type: Boolean,
            default: true,
        },
        specshow: {
            type: Boolean,
            default: true,
        },
    },
    data() {
        return {
            isSelect: false,
            subIds: [],
            tagName: "折叠",
        }
    },
    watch: {
        selectData(e) {
            this.isSelectFn(e)
        },
    },
    mounted() {
        this.isSelectFn(this.selectData)
    },
    methods: {
        select() {
            this.specshow = !this.specshow
            this.$emit("specfn", this.specshow)
        },
        change(isSelect) {
            let obj = {
                isSelect: !isSelect,
                proId: this.productInfo.ProductId,
                subIds: this.subIds,
            }
            this.$emit("changeCheck", obj)
        },
        getIsSelect(is) {
            return is
        },
        isSelectFn(data) {
            let ids = data.ids

            let subIds = []
            this.productInfo.SubItems.forEach((e) => {
                subIds.push(String(e.ID))
            })
            this.subIds = subIds
            let newList = []
            subIds.filter((val) => {
                if (ids.includes(String(val))) {
                    newList.push(val)
                }
            })
            this.isSelect = newList.length > 0 && newList.length == subIds.length
        },
        // 进入商品详情
        goDetailPage() {
            if (this.getAppSet().isHideProDetail) {
                return
            }
            if (this.getAppSet().pagesClassify) {
                this.easyGoTo(
                    `/pages_classify/packet/product/productDetail?id=${this.productInfo.ProductId}&InfoType=${
                        this.productInfo.SkuType ? this.productInfo.SkuType : 1
                    }`,
                )
            } else {
                this.easyGoTo(
                    `/pages_shop/packet/product/productDetail?id=${this.productInfo.ProductId}&InfoType=${
                        this.productInfo.SkuType ? this.productInfo.SkuType : 1
                    }`,
                )
            }
        },
    },
}
</script>

<style lang="scss">
.cart-item-product {
    display: flex;
    flex-direction: row;
    align-items: center;
    border-bottom: solid 1rpx $uni-bg-color-grey;
    padding: $app-page-padding 0;
    position: relative;
    .item-radio {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
    }

    .item-img {
        width: 120rpx;
        height: 120rpx;
        margin-right: 20rpx;
        border-radius: 8rpx;
    }

    .item-name {
        display: flex;
        flex: 1;
        flex-direction: column;
        font-weight: 700;
        font-size: $font-size-28;
    }
}
.oneSpec {
    border-bottom: none;
    padding: $app-page-padding 0 10rpx;

    .item-radio {
        margin-right: 36rpx;
        margin-left: 12rpx;
    }
}
.unit-btn {
    position: absolute;
    right: 0;
    bottom: 24rpx;
    width: 80rpx;
    height: 32rpx;
    background: #ffffff;
    border-radius: 20rpx;
    border: 1rpx solid #b9c0d0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20rpx;
    color: #333;
    .unit-text {
        margin-right: 10rpx;
    }

    .arrow {
        border: solid $color-gray-3;
        border-width: 0 1px 1px 0;
        padding: 2px;
    }

    .arrow-up {
        margin-top: 8rpx;
    }

    .arrow-down {
        margin-bottom: 5rpx;
    }
}
</style>
